<template>
  <div class="animate__animated animate__fadeInUp animate__faster">
    <div class="form">
      <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item prop="email">
          <el-input size="large" ref="inputEmail" v-model="form.email" :placeholder="lang.t('page.index.email')" @keyup.enter="onPassword">
            <template #prefix>
              <i class="el-input__icon iconfont block icon-account" style="margin-left: -3px;"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="large" ref="inputPassword" v-model="form.password" :placeholder="lang.t('page.index.password')" @keyup.enter="onLogin" type="password" >
            <template #prefix>
              <i class="el-input__icon iconfont block icon-password" style="margin-left: -3px;"></i>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ref, reactive, nextTick } from 'vue'
import app from '@/app'
import userModel from '@/model/user'

export default {
  props: [
    'tab'
  ],
  setup() {
    // 输入框
    const inputEmail = ref(null)
    const inputPassword = ref(null)

    // 表单
    const formRef = ref(null)
    const form = reactive({
      email: '',
      password: '',
    })

    // 验证
    const rules = {
      email: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      password: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
    }

    // 登陆
    const onLogin = () => {
      formRef.value.validate(valid => {
        if (valid) {
          userModel.login(form)
        }
      })
    }

    nextTick(() => {
      // 邮箱文本框焦点
      inputEmail.value.focus()
    })

    // 密码框焦点
    const onPassword = () => {
      inputPassword.value.focus()
      // 全选密码
      inputPassword.value.select()
    }

    return {
      lang: app.lang,
      inputEmail,
      inputPassword,
      formRef,
      form,
      rules,
      onLogin,
      onPassword
    }
  }
}
</script>